<template>
    <view class="content-swiper-bottom-message-box content-swiper-bottom-message-box-disabled" @click="reviewFn()">留下你的足迹
    </view>
    <van-popup v-model:show="state.show" position="bottom" round :style="{ height: '80%' }" teleport="body">
        <view class="review-main-box">
            <view class="review-head-box">
                <van-image fit="cover" position="left" :src="state.trendMessage.UserInfo.Avatar" /><text>{{
                    state.trendMessage.UserInfo.ShowName }}</text>
                <Ident :userInfo="state.trendMessage.UserInfo" />
            </view>
            <view class="review-content">
                <van-text-ellipsis rows="2" :content="state.trendMessage.Text" expand-text="展开" collapse-text="收起" />
            </view>

            <view class="review-topic-label" v-if="state.trendMessage.Topics.length">
                <view class="content-swiper-bottom-label" v-for="item in state.trendMessage.Topics" :key="item">
                    <img src="@/assets/image/icon14.png" alt="">
                    <text>{{ item.Title }}</text>
                </view>
            </view>

            <view class="review-topic-del">
                <view class="review-topic-del-left">
                    <img src="@/assets/image/icon72.png" alt="">
                    <text>长按评论可以举报删除</text>
                </view>
                <img src="@/assets/image/icon70.png" alt="">
            </view>
            <ReviewList :isChat="true" :stateId="state.trendMessage.ID" :CommentsList="state.CommentsList"
                :CommentCount="state.trendMessage.CommentCount" @praiseSelectChange="praiseSelectChange" />
        </view>
    </van-popup>
</template>
    
<script setup>

import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import Ident from "@/pages/home/components/ident/index.vue"
import ReviewList from "@/pages/home/components/review/reviewList.vue"
import { onLoad } from '@dcloudio/uni-app'

import {
    TrendOne,
    VisitorUser, // 获取动态详情
    TrendOneComments, // 获取评论列表
} from "@/api/list/index.js"

const props = defineProps(['curUserInfo'])

let { proxy } = getCurrentInstance()

const state = reactive({
    show: false,
    value: '',
    trendMessage: {},
    PageIndex: 1,
    PageSize: 20,
    CommentsList: []
})

const reviewFn = () => {
    state.show = true
}

const getOne = async (id) => {
    let data = await proxy.$get(TrendOne + id)
    if (data.code == 200) {
        state.trendMessage = data.data
        VisitorUserFn(data.data)
    }
}

const timerFn = (num) => {
    return timer(num, 'm-d')
}

// 获取评论列表
const getCommentsLit = async (dataItem) => {
    // PageIndex=1&UserId=151743&PageSize=20
    let params = {
        PageIndex: state.PageIndex,
        PageSize: state.PageSize,
        userId: dataItem.UserInfo.ID
    }
    let data = await proxy.$get(TrendOneComments + dataItem.ID + '/Comments', params)
    if (data.code == 200) {
        state.CommentsList = state.CommentsList.concat(data.data)
    }
}

// 修改点赞状态
const praiseSelectChange = (item) => {
    state.CommentsList.forEach(o => {
        if (o.ID == item.ID) {
            o.IsLike = !o.IsLike
            if (o.IsLike) {
                o.LikeCount++
            } else {
                o.LikeCount--
            }
        }
        if (o.Children.length) {
            o.Children.forEach(o1 => {
                o1.IsLike = !o1.IsLike
                if (o1.ID == item.ID) {
                    o1.IsLike = !o1.IsLike
                    if (o1.IsLike) {
                        o1.LikeCount++
                    } else {
                        o1.LikeCount--
                    }
                }
            })
        }
    })
}

const VisitorUserFn = async (dataItem) => {
    let params = {
        LookPage: '动态详情',
        visitorPage: '动态详情',
        visitorUserID: dataItem.UserInfo.ID
    }
    let data = await proxy.$post(VisitorUser, params)
    getCommentsLit(dataItem)
}

onLoad((options) => {
    let id = ""
    if (props.curUserInfo.ID) {
        id = props.curUserInfo.ID
    } else {
        id = options.id
    }
    getOne(id)
})

defineExpose({
    reviewFn
})

</script>
    
<style lang="scss" scoped>
.content-swiper-bottom-message-box {
    background: rgba(200, 200, 200, .5);
    border-radius: 40rpx;
    line-height: 80rpx;
    padding: 0 30rpx;
    width: 100%;
}

.content-swiper-bottom-message-box-disabled {
    background: rgba(200, 200, 200, .3);
    color: #ccc;
}

.review-head-box {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #DCDCDC;

    .van-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
        overflow: hidden;
    }

    text {
        font-size: 32rpx;
        color: #262626;
        margin-left: 20rpx;
    }
}

.review-content {
    padding: 20rpx;
}

.review-topic-label {
    padding: 0 20rpx 20rpx 20rpx;
}

.review-topic-label {
    display: flex;
    flex-wrap: wrap;
}

.content-swiper-bottom-label {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    margin-bottom: 10rpx;

    img {
        width: 24rpx;
        height: 24rpx;
        margin-right: 5rpx;
    }

    text {
        font-size: 24rpx;
        color: #999
    }

}

.review-topic-del {
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;

    img {
        width: 24rpx;
    }

    .review-topic-del-left {
        display: flex;
        align-items: center;

        text {
            font-size: 24rpx;
            color: #999;
        }

        img {
            width: 32rpx;
            margin-right: 10rpx;
        }
    }
}

.review-list-box {
    .review-list-head {
        font-size: 36rpx;
        padding: 30rpx 20rpx;

        text:nth-child(2) {
            font-size: 24rpx;
            color: #999;
            margin-left: 10rpx;
        }
    }

    .review-list-item {
        display: flex;
        padding: 0 0 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-bottom: 1px solid #EDEDED;

        .review-list-item-head {
            width: 76rpx;
            flex: none;

            .van-image {
                width: 76rpx;
                height: 76rpx;
                border-radius: 76rpx;
                overflow: hidden;
            }
        }

        .review-list-item-head-right-list {
            width: 100%;

            .review-list-item-head-right {
                display: flex;
                width: 100%;
                justify-content: space-between;
                padding: 0 20rpx;
                box-sizing: border-box;

                .review-list-item-head-name {
                    font-size: 26rpx;
                    color: #939191;
                }

                .praise-box {
                    display: flex;
                    align-items: center;

                    img {
                        width: 48rpx;
                        height: 48rpx;
                    }

                    text {
                        font-size: 24rpx;
                        margin-left: 10rpx;
                        color: #999;
                    }
                }

            }

            .review-list-item-content {
                padding: 0 20rpx;
                font-size: 28rpx;
                color: #262626
            }

            .review-list-item-content-time {
                font-size: 20rpx;
                color: #999;
                margin-top: 10rpx;
            }
        }

    }

    .review-list-item-reply {
        border-bottom: none;
        margin-top: 20rpx;

        .review-list-item-head {
            width: 48rpx;

            .van-image {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .review-list-item-head-name-box {
            text:nth-child(2) {
                background-color: #E8E8E8;
                color: #999;
                font-size: 24rpx;
                padding: 2rpx 5rpx;
                margin-left: 8rpx;
                display: inline-block;
            }
        }
    }
}

.review-main-box {
    padding-bottom: 160rpx;
}
</style>
    